<template>
  <div class="detail-swiper">
    <van-swipe class="swipe" lazy-render :autoplay="3000">
      <template v-for="(item, index) in swipeData" :key="index">
        <van-swipe-item class="swipeItem">
          <img :src="item.url" alt="" />
        </van-swipe-item>
      </template>
      <!-- #indicator 相当于 v-slot 替换掉默认的 。。。换成插槽内容 -->
      <template #indicator="{ active }">
        <div class="custom-indicator">
          <template v-for="(value, key, index) in swipeCate" :key="index">
            <div
              class="item"
              :class="{
                active: swipeData[active]?.enumPictureCategory == key,
              }"
            >
              <span>
                <!-- 根据当前的active的enumPictureCategory 匹配key-->
                {{ getName(value[0].title) }}
              </span>
              <span v-if="swipeData[active]?.enumPictureCategory == key">
                {{
                  "【" +
                  getCateIndex(swipeData[active]) +
                  "/" +
                  value.length +
                  "】"
                }}
              </span>
            </div>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
import { onUnmounted, nextTick, reactive } from "vue";
const props = defineProps({
  swipeData: {
    type: Array,
    default: () => [],
  },
});
// onUnmounted(() => {
//   props.swipeData = [];
//   swipeCate = {};
// });
// let swipermsg = ref({props.swip})
// 抽取分类数据
// let swipeDatasort = sort(compare("swipeData"))
const swipeCate = {};
for (const item of props.swipeData) {
  let valueArr = swipeCate[item.enumPictureCategory];
  if (!valueArr) {
    valueArr = [];
    swipeCate[item.enumPictureCategory] = valueArr;
  }
  // valueArr 等同于 swipeCate.xx 的value
  valueArr.push(item);
}

// 提取标题
const textReg = /【(.*?)】/i;
const getName = (name) => {
  return textReg.exec(name)[1];
};
// 获取active在分组中的下标
const getCateIndex = (item) => {
  const valueArr = swipeCate[item.enumPictureCategory];
  return valueArr.findIndex((data) => data.orderIndex === item.orderIndex) + 1;
  // console.log(valueArr.findIndex((data) => data === item) + 1);
  // console.log(valueArr);
  // console.log(item.orderIndex);
  return 3;
};
//排序
</script>

<style lang="less" scoped>
.swipe {
  .swipeItem {
    img {
      width: 100%;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: flex;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #aaa;
  .item {
    margin: 0 2px;
  }
  .active {
    background-color: #fff;
    padding: 0 5px;
    border-radius: 6px;
  }
}
</style>
